<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="850" height="450"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Draw Figure 甲 (Jia) ---

    // Style
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.font = '20px sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Truck Platform
    ctx.beginPath();
    ctx.moveTo(80, 180);
    ctx.lineTo(420, 180);
    ctx.stroke();

    // Truck
    // Body
    ctx.strokeRect(250, 150, 100, 30);
    // Cabin
    ctx.beginPath();
    ctx.moveTo(350, 150);
    ctx.lineTo(400, 150);
    ctx.lineTo(400, 100);
    ctx.lineTo(370, 100);
    ctx.lineTo(350, 120);
    ctx.closePath();
    ctx.stroke();
    // Wheels
    ctx.beginPath();
    ctx.arc(280, 190, 10, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.beginPath();
    ctx.arc(320, 190, 10, 0, 2 * Math.PI);
    ctx.stroke();

    // Pulley and Support
    ctx.beginPath();
    ctx.moveTo(150, 220); // Base of support
    ctx.lineTo(150, 100); // Vertical post
    ctx.lineTo(130, 100); // Horizontal arm
    ctx.stroke();
    // Pulley
    ctx.beginPath();
    ctx.arc(130, 115, 15, 0, 2 * Math.PI);
    ctx.stroke();

    // Container and Water
    ctx.beginPath();
    ctx.moveTo(50, 400); // Bottom left
    ctx.lineTo(50, 220);  // Left wall
    ctx.lineTo(250, 220); // Right wall start
    ctx.lineTo(250, 400); // Right wall end
    ctx.stroke();
    // Water surface
    ctx.beginPath();
    ctx.moveTo(50, 280);
    ctx.lineTo(250, 280);
    ctx.stroke();
    // Dashed lines for water
    ctx.save();
    ctx.setLineDash([5, 5]);
    for (let y = 300; y <= 360; y += 20) {
        ctx.beginPath();
        ctx.moveTo(50, y);
        ctx.lineTo(250, y);
        ctx.stroke();
    }
    ctx.restore();

    // Submerged Object
    ctx.strokeRect(120, 370, 60, 30);

    // Rope
    ctx.beginPath();
    ctx.moveTo(250, 165); // Attach to truck
    ctx.lineTo(130, 115); // To pulley center
    ctx.lineTo(150, 370); // To object center
    ctx.stroke();

    // Label for Figure 甲
    ctx.fillText('甲', 200, 430);


    // --- Draw Figure 乙 (Yi) ---

    // Define coordinate system parameters for Figure B
    const originX = 500;
    const originY = 400;
    const axisXEnd = 820;
    const axisYEnd = 50;
    
    // Function to map data coordinates to canvas coordinates
    function getCanvasCoords(t, P) {
        const x = originX + t * 3.5;
        const y = originY - P * 0.4;
        return { x, y };
    }

    // Axes
    ctx.beginPath();
    // X-axis
    ctx.moveTo(originX, originY);
    ctx.lineTo(axisXEnd, originY);
    ctx.lineTo(axisXEnd - 10, originY - 5);
    ctx.moveTo(axisXEnd, originY);
    ctx.lineTo(axisXEnd - 10, originY + 5);
    // Y-axis
    ctx.moveTo(originX, originY);
    ctx.lineTo(originX, axisYEnd);
    ctx.lineTo(originX - 5, axisYEnd + 10);
    ctx.moveTo(originX, axisYEnd);
    ctx.lineTo(originX + 5, axisYEnd + 10);
    ctx.stroke();

    // Axis Labels
    ctx.font = '18px Times New Roman';
    ctx.fillText('O', originX - 15, originY + 15);
    ctx.fillText('t/s', axisXEnd, originY + 20);
    ctx.fillText('P/W', originX - 10, axisYEnd - 15);

    // Graph points
    const pA = getCanvasCoords(0, 700);
    const pB = getCanvasCoords(50, 700);
    const pC = getCanvasCoords(60, 800);
    const pD = getCanvasCoords(75, 800); // End of line segment D

    // Draw graph segments
    ctx.lineWidth = 2.5;
    ctx.beginPath();
    ctx.moveTo(pA.x, pA.y);
    ctx.lineTo(pB.x, pB.y); // Segment AB
    ctx.lineTo(pC.x, pC.y); // Segment BC
    ctx.lineTo(pD.x, pD.y); // Segment CD
    ctx.stroke();

    // Ticks and Labels on axes
    ctx.lineWidth = 1.5;
    ctx.font = '16px sans-serif';
    
    // P-axis ticks
    ctx.beginPath();
    ctx.moveTo(originX - 5, pA.y);
    ctx.lineTo(originX, pA.y);
    ctx.stroke();
    ctx.fillText('700', originX - 30, pA.y);

    ctx.beginPath();
    ctx.moveTo(originX - 5, pC.y);
    ctx.lineTo(originX, pC.y);
    ctx.stroke();
    ctx.fillText('800', originX - 30, pC.y);

    // t-axis ticks
    ctx.beginPath();
    ctx.moveTo(pB.x, originY);
    ctx.lineTo(pB.x, originY + 5);
    ctx.stroke();
    ctx.fillText('50', pB.x, originY + 20);

    ctx.beginPath();
    ctx.moveTo(pC.x, originY);
    ctx.lineTo(pC.x, originY + 5);
    ctx.stroke();
    ctx.fillText('60', pC.x, originY + 20);

    // Dashed lines
    ctx.save();
    ctx.setLineDash([4, 4]);
    ctx.strokeStyle = '#555';
    // From B to t-axis
    ctx.beginPath();
    ctx.moveTo(pB.x, pB.y);
    ctx.lineTo(pB.x, originY);
    ctx.stroke();
    // From C to t-axis
    ctx.beginPath();
    ctx.moveTo(pC.x, pC.y);
    ctx.lineTo(pC.x, originY);
    ctx.stroke();
    // From C to P-axis
    ctx.beginPath();
    ctx.moveTo(pC.x, pC.y);
    ctx.lineTo(originX, pC.y);
    ctx.stroke();
    ctx.restore();

    // Point Labels (A, B, C, D)
    ctx.font = 'bold 20px Times New Roman';
    ctx.fillText('A', pA.x + 10, pA.y - 15);
    ctx.fillText('B', pB.x - 10, pB.y + 20);
    ctx.fillText('C', pC.x + 10, pC.y - 10);
    ctx.fillText('D', pD.x + 10, pD.y);

    // Label for Figure 乙
    ctx.font = '20px sans-serif';
    ctx.fillText('乙', (originX + axisXEnd) / 2, 430);

</script>
</body>
</html>